<!--用户注册页面-->
<template>
  <el-container>
    <el-main>
      <el-form ref="form" :model="user" label-width="85px" :rules="rules">
        <el-form-item label="邮箱:" prop="email">
          <el-input v-model="user.email"></el-input>
        </el-form-item>
        <el-form-item label="姓名:" prop="username">
          <el-input v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="userpwd">
          <el-input v-model="user.userpwd"></el-input>
        </el-form-item>
        <el-form-item label="二次确认:" prop="userpwd2">
          <el-input v-model="user.userpwd2"></el-input>
        </el-form-item>
        <el-form-item label="身份证:" prop="idcard">
          <el-input v-model="user.idcard"></el-input>
        </el-form-item>
        <el-form-item label="性别:" prop="sex">
          <el-radio-group v-model="user.sex">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="所在班级:" prop="grade">
          <el-cascader :options="options" v-model="user.grade" placeholder="请选择班级"/>
        </el-form-item>
        <el-form-item label="身份等级" prop="level">
          <el-select v-model="user.level" placeholder="请选择用户身份">
            <el-option label="管理员" value="0"></el-option>
            <el-option label="教师" value="1"></el-option>
            <el-option label="学生" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-button @click="button">注册</el-button>
    </el-main>
  </el-container>
</template>

<script>
// 导入全局数据
import Data from "@/components/Data";
import {request} from "@/network/request";
import Rules from "@/components/Rules";

export default {
  name: "register",
  data() {
    // 自定义规则
    let checkpwd = (rule, value, callback) => {
      if (this.$data.user.userpwd !== this.$data.user.userpwd2) {
        callback(new Error("密码二次不一致"));
      } else {
        callback();
      }
    };
    return {
      // select数据
      options: Data.options,
      // 校验规则
      rules: {
        // 邮箱
        email: Rules.rules.email,
        // 用户名
        username: Rules.rules.username,
        // 密码
        userpwd: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {
            pattern: /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,
            message: '请输入6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种',
            trigger: 'blur'
          },
        ],
        // 二次密码
        userpwd2: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {
            pattern: /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,
            message: '请输入6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种',
            trigger: 'blur'
          },
          {validator: checkpwd, trigger: 'blur'}
        ],
        // 身份证
        idcard: Rules.rules.idcard,
        // 所属班级
        grade: Rules.rules.class,
        // 用户身份
        level: Rules.rules.level,
      },
      // 自定义数据
      user: {
        email: null,
        username: null,
        userpwd: null,
        userpwd2: null,
        sex: 0,
        idcard: null,
        level: null,
        grade: null,
      }
    }
  },
  methods: {
    button() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // 判断邮箱是否存在
          request({
            url: 'login/mailList',
            params: {
              mail: this.$data.user.email
            }
          }).then(res => {
            if (res.data.success) {
              //判断身份证是否存在
              request({
                url: 'login/idcardList',
                params: {
                  idcard: this.$data.user.idcard
                }
              }).then(res => {
                if (res.data.success) {
                  //查重通过，开始上传
                  request({
                    url: 'login/useradd',
                    params: {
                      mail: this.$data.user.email,
                      username: this.$data.user.username,
                      userpwd: this.$data.user.userpwd,
                      sex: this.$data.user.sex,
                      idcard: this.$data.user.idcard,
                      grade: this.$data.user.grade[0] + "-" + this.$data.user.grade[1],
                      level: this.$data.user.level
                    }
                  }).then(res => {
                    if (res.data.success) {
                      this.$alert('注册成功！', '', {
                        confirmButtonText: '确定',
                        callback: action => {
                          this.$router.replace('/');
                        }
                      });
                    } else {
                      this.$message({
                        type: 'warning',
                        message: "上传失败"
                      });
                    }
                  }).catch(err => {
                    this.$message({
                      type: 'warning',
                      message: '数据错误' + err
                    });
                  })
                } else {
                  this.$message({
                    type: 'warning',
                    message: res.data.message
                  });
                }
              }).catch(err => {
                this.$message({
                  type: 'warning',
                  message: '数据错误' + err
                });
              })
            } else {
              this.$message({
                type: 'warning',
                message: res.data.message
              });
            }
          }).catch(err => {
            this.$message({
              type: 'warning',
              message: '数据错误' + err
            });
          })
        } else {
          this.$message({
            type: 'warning',
            message: '校验失败'
          });
        }
      })
    }
  }
}
</script>

<style scoped>

</style>